/* General classes for text */
.text-error
  color: $errorNotifyColor
.text-success
  color: $successNotifyColor
.text-warning
  color: $warningNotifyColor
.text-info
  color: $infoNotifyColor
.text-notify
  color: $noteNotifyColor

/* Lists */
ul,
ol
  list-style: none

.list.__inline,
.menu.__inline
  word-spacing: -4px

ul,
ol
  li
    padding-bottom: 2px
    padding-left: 15px
    padding-top: 2px
    text-indent: -15px
    &::before
      color: #a6a6a6
      content: '\2014\a0 '

.list .list-item,
.menu .menu-item,
.tree .tree-item
  padding-bottom: 0
  padding-left: 0
  padding-top: 0
  text-indent: 0
  &::before
    content: ' '

.__inline .list-item,
.__inline .menu-item
  display: inline-block
  vertical-align: top
  word-spacing: 0

.__actions .list-item,
.__actions .menu-item
  display: inline-block
  padding: 0 2px
  vertical-align: top
  word-spacing: 0

/* List notice */
.list.__notice
  .list-item
    background: inherit
    box-shadow: inherit
    height: 28px
    line-height: 28px
    position: inherit
    text-align: left
    &:hover
      box-shadow: none
  .list-link
    color: $listNoticeItemColor
    display: block
    font-size: 14px
    padding: 0 10px
    &:hover
      background: $listNoticeLinkColor
  .list-ico
    font-size: 18px
    margin: 0 2px 0 0
    width: 25px
  .list-item.__error
    .list-ico
      color: $genericErrorColor
  .list-item.__warning
    .list-ico
      color: $genericWarningColor

/* List car info */
.list.__car-info
  display: inline-block
  .list-item
    font-size: 14px
    margin: 15px 0 0
    padding: 0 0 0 35px
    position: relative
    text-align: left
  .tile-ico
    font-size: 18px
    left: 0
    position: absolute
    top: 5px
    width: 25px
  .list-name
    color: $genericInfoColor
    display: block

.tile.double .list.__car-info .tile-ico
  margin: 0

.menu.__theme-links
  padding: 10px 0
  word-spacing: -12px
  .menu-item
    text-align: center
    width: 33.3333%
  .menu-link
    display: block
    font-size: 13px
  .menu-ico
    display: block
    font-size: 17px
    margin: 0 0 5px

.menu.__context
  background: $menuContextBg
  display: none
  position: fixed
  padding: 10px 0
  z-index: 100
  .menu-item
    color: $whiteColor
    cursor: pointer
    font-family: $font
    font-size: 13px
    padding: 5px 20px
    position: relative
    text-align: left
    text-shadow: none
    white-space: nowrap
    &:hover
      color: $menuContextMenuItemColorOver
      .menu.__sub
        display: block
  .menu-item.__right
    padding: 5px 40px 5px 20px
    .menu-ico
      position: absolute
      right: 20px
      width: 6px
  .menu-ico
    font-size: 18px
    width: 25px
  .menu.__sub
    background: $menuContextBg
    display: none
    left: 100%
    padding: 10px 0
    position: absolute
    top: -10px
.menu.__context.open,
.menu.__context.__open
  display: block

/* List info */
.list.__info
  margin: 15px 0
  > .list-item
    padding: 5px 0
  .list-t
    color: $listInfoListTColor
    display: block
    font-size: 14px
  .list-descr
    color: $listInfoListDescrColor
    font-size: 12px
    margin: 5px 0 0
    word-wrap: break-word
    // web-kit only
    word-break: break-word
  .list-link
    font-size: 12px

/* List tags */
.list.__tags
  margin: 5px 0 0
  word-spacing: -4px
  .list-item
    background: $baseColor
    color: $whiteColor
    display: inline-block
    line-height: 1.1
    margin: 0 5px 0 0
    padding: 5px 10px
    word-spacing: 0
  .list-ico
    font-size: 14px
    vertical-align: 2px
  .list-name
    display: inline-block
    font-size: 12px
    vertical-align: 3px

/* List number */
.list.__number
  counter-reset: num
  .list-item
    padding: 0 0 0 20px
    position: relative
    &::before
      color: $listNumberItemColor
      content: counter(num) '. '
      counter-increment: num
      left: 0
      position: absolute
      top: 2px

/* Headings */
h1
  font-size: $h1FontSize

h2
  font-size: $h2FontSize

h3
  font-size: $h3FontSize

h1,
h2,
h3
  color: $colorText
  font-weight: 300
  line-height: 1

.t
  font-size: 32px

.sub-t
  font-size: 24px
  margin: 20px 0 10px

.t,
.sub-t
  font-weight: 300
  line-height: 1

.sub-t.__border
  border-bottom: 1px solid $baseBrd
  margin: 20px 0 0
  padding: 0 0 10px

.t + .t,
.sub-t + .sub-t
  margin: 20px 0 10px

.t.__divider
  background: $lightBg
  border-color: $baseBrd
  border-style: solid
  border-width: 1px 0
  margin: 0 -20px 10px
  padding: 10px 20px
  position: relative
  .t-ico
    position: absolute
    width: 32px
    background-size: 32px
    right: 20px
    top: 50%
    transform: translateY(-50%)

.t.__divider + .t.__divider
  margin-top: 20px

.text
  font-size: 14px
  margin: 5px 0

.text.__debug
  color: $textDebugColor
  font-size: 11px
  word-wrap: break-word

.text.__note
  border: 1px solid $textNoteBrd
  margin: 10px 0
  padding: 10px
  span:first-child
    color: $genericErrorColor

.text.__editable
  background: $lightBg
  border: 1px dashed $baseBrd
  color: $baseColor
  cursor: text
  padding: 5px 10px

.text.__editable:hover,
.text.__editable.__selected
  background-color: $textEditBgOver
  border-color: $textEditBrdOver

.sub-text
  font-size: 14px

.text-mini
  font-size: 11px

.__right
  text-align: right

/* Notifies */
.note,
.note.error,
.note.success,
.note.warning,
.note.info
  border-style: solid
  border-width: 1px
  font-size: 14px
  margin: 20px 0
  padding: 10px

.note
  background: $noteNotifyBg
  border-color: $noteNotifyBrd
  color: $noteNotifyColor

.error
  background: $errorNotifyBg
  border-color: $errorNotifyBrd
  color: $errorNotifyColor

.success
  background: $successNotifyBg
  border-color: $successNotifyBrd
  color: $successNotifyColor

.warning
  background: $warningNotifyBg
  border-color: $warningNotifyBrd
  color: $warningNotifyColor

.info
  background: $infoNotifyBg
  border-color: $infoNotifyBrd
  color: $infoNotifyColor

/* Tables */
.table-wrapper
  margin: 0 -20px 0
.form .table-wrapper
  margin: 0 -36px 15px -20px
.table
  border-collapse: collapse
  border-spacing: 0
  padding: 0
  width: 100%
  &.__fixed
    table-layout: fixed
  .table-head
    border-bottom: 1px solid $baseBrd
    font-size: 14px
    padding: 5px 20px
  .table-col
    border-color: $baseBrd
    border-style: solid
    border-width: 1px 0
    font-size: 14px
    padding: 10px
    text-align: left
  .table-col:first-child
    padding-left: 20px
  .table-col:last-child
    padding-right: 20px
  &.__data .table-col
    vertical-align: top
  th.table-col
    background: rgba(0,0,0,.025)
    font-size: 14px
    font-weight: 500
    line-height: 1.3
  .table-item
    cursor: pointer
  .table-ico
    .sort
      font-size: 16px
      margin: 5px 0 0 10px
    &.sort.fa-sort-down
      margin: -8px 0 0 10px
.table.__indexed
  @include column("th", 5, true)
.table-info
  display: inline-block
  height: 100%
  vertical-align: middle
.table-t,
.table-descr
  display: block
  font-size: 12px
.table-t
  display: inline-block
  font-size: 14px
  font-weight: 500
  max-width: 100%
  overflow: hidden
  text-overflow: ellipsis
  vertical-align: middle
  .table-descr
    display: inline
.table-descr
  color: $tableColor
.table-progress
  margin: 10px 0 0
  position: relative
.table-status
  background: $tableStatusBg
  color: $whiteColor
  display: block
  font-size: 12px
  height: 20px
  line-height: 18px
  padding: 0 5px
  text-align: center
  text-shadow: none
  &.__active
    background: $baseColor
.table-date
  color: $tableColor
  font-size: 12px
.table-img
  border: none
  height: auto
  max-width: 40px
  vertical-align: middle
.table-ico
  color: $tableIcoColor
  font-size: 28px
  margin: 0 10px
  vertical-align: middle
.table-item
  &.__error .table-ico
    color: $genericErrorColor
  &.__warning .table-ico
    color: $genericWarningColor
  &.__info .table-ico
    color: $genericInfoColor

/* Product */
.product-img
  height: 40px
  line-height: 40px
  text-align: center
  width: 40px
  .image
    background-blend-mode: darken
    background-position: 50% 50%
    background-repeat: no-repeat
    background-size: contain
    height: 100%
    margin: 0 0 0 6px
    position: relative
    width: 100%
  img.image
    height: auto
  .table-badge
    position: absolute
    left: 1px
    top: 2px
    width: 16px
.table-item:hover .product-img .image
  background-color: $productImgOver
.table-item.__selected .product-img .image
  background-color: $productImgSel
.product .table-ico
  color: $tableIcoColor
  font-size: 28px
  margin: 0 10px
  vertical-align: middle

/* UI Grid */
@import "modules/_ui-grid.sass"

/* Forms */
@import "modules/_forms.sass"

/* Tiles */
.tile-group
  margin: 0 -10px 0 0
  min-width: ($tileSize + $tileMargin)
  overflow: hidden
  position: relative
  width: auto
.tile-group + .tile-group
  margin: 20px 0 0
.dashboard .tile-group
  overflow: visible
.tile-group .tile-group,
.tile-group .tile-group + .tile-group
  float: left
  margin: 0
  padding: 0

$names: "one", "two", "three", "four", "five", "six", "seven"
@for $x from 1 through 7
  .tile-group
    #{("&." + nth($names, $x))}
      width: ($tileSize + $tileMargin) * $x

$names: "", ".double", ".triple", ".quadro"
@for $x from 1 through 4
  .tile
    #{"&" + nth($names, $x)}
      height: $tileSize * $x + $tileMargin * ($x - 1)
      width: $tileSize * $x + $tileMargin * ($x - 1)
      @if ($x > 1)
        &.tall
          height: $tileSize * $x + $tileMargin * ($x - 1)
          width: $tileSize * ($x - 1) + $tileMargin * ($x - 2)
        &.wide
          height: $tileSize * ($x - 1) + $tileMargin * ($x - 2)
          width: $tileSize * $x + $tileMargin * ($x - 1)
        @if ($x >= 3)
          &.wide.mini
            height: $tileSize
            width: $tileSize * $x + $tileMargin * ($x - 1)

.tile
  background: $lightBg
  box-sizing: border-box
  box-shadow: 0 0 0 2px $baseBrd inset
  color: $colorText
  cursor: pointer
  float: left
  font-size: 48px
  margin: $tileMargin $tileMargin 0 0
  padding: 2px
  position: relative
  text-align: center
  vertical-align: top
  &::before
    opacity: 0
  .tile-ico
    margin: 25px 0 0
  .btn
    display: inline-block
    line-height: 28px
    vertical-align: top
  .tile-descr
    display: block
    font-size: 14px
    margin: 10px 0 5px
    max-height: 78px
    overflow: hidden
  .tile-count
    color: #999
    font-size: 30px
    line-height: 1
    margin: 0 0 10px
  .tile-t
    font-size: 24px
    margin: 10px 0
  .tile-img
    display: inline-block
    max-height: 100%
    max-width: 100%
    vertical-align: middle
  .tile-action
    background: $baseBrd
    height: 30px
    line-height: 30px
    opacity: 0
    position: absolute
    left: 0
    top: 0
    width: 30px

    filter: alpha(opacity=0)
    transition: opacity .25s ease-in-out
  &:hover
    .tile-action
      background-color: #a1c0d4
      opacity: 1

      filter: alpha(opacity=100)
      *
        color: $whiteColor
        font-size: 17px
  .tile-action:nth-child(2)
    left: auto
    right: 0
.tile.__price
  line-height: 0
  *
    display: block
    line-height: 1
  .tile-count
    color: $baseColor
    font-size: 24px
    margin: 10px 0 0
  .tile-price
    color: $baseColor
    font-size: 30px
    height: 49px
    line-height: 40px
    margin: 20px 0 0
  .tile-descr + .tile-price
    font-size: 14px
    height: auto
    line-height: 1
.tile:hover,
.tile.__selected
  box-shadow: 0 0 0 2px #a1c0d4 inset
.tile.__info:hover,
.tile.__selected.__info
  cursor: default
  box-shadow: none
.__note
  background-color: #fffff5
.tile.__selected
  &::after
    border-color: #a1c0d4 #a1c0d4 transparent transparent
    border-style: solid
    border-width: 15px
    content: ''
    font-family: $fontAw
    font-size: 16px
    position: absolute
    right: 0
    top: 0
  &::before
    color: $whiteColor
    content: ""
    font-family: $fontAw
    font-size: 10px
    line-height: 0
    position: absolute
    right: 4px
    top: 9px
    z-index: 25
  &::after,
  &::before
    opacity: 1
.__images-list .tile
  line-height: 100px
.tile.__brand .tile-descr
  font-size: 24px
  margin: 20px 0
.tile.__brand .tile-image
  display: inline-block
  height: $tileSize
  line-height: 96px
  text-align: center
  width: $tileSize
  img
    display: inline-block
    max-height: 100%
    max-width: 100%
    vertical-align: middle
.tile .tile-descr.__once
  font-size: 24px
  margin: 35px 0
.tile .tile-ico + .tile-descr
  margin: 0 10px

/* Half */
.tile.double
  font-size: 72px
  .tile-descr.__once
    margin: 100px 0 0
  .tile-ico
    margin: 60px 0 0
.tile-double.wide
  font-size: 48px
  .tile-descr.__once
    margin: 35px 0
  .tile-ico
    margin: 35px 10px 0 0
  .tile-descr
    display: inline-block
    vertical-align: 10px
  .tile-count + .tile-descr
    display: block
.__images-list .tile.double
  line-height: 225px
.tile.double.tall
  font-size: 48px
  .tile-ico
    margin: 80px 0 0

.tile.quadro.__tree:hover
  overflow-y: auto

/* Items lists */
.list.__items,
.list.__files
  margin: 0 -20px 15px
.list.__files
  margin: 15px -20px
.__items .list-group
  background: $listGroupBg
  border-bottom: 1px solid $baseBrd
  cursor: pointer
  font-size: 14px
  padding: 10px $listItemHorizontalPadding
  position: relative
  &::after
    color: #a6a6a6
    content: ''
    font-family: $fontAw
    font-size: 16px
    position: absolute
    right: 20px
    top: 50%

    transform: translateY(-50%)
.__items .list-group.__opened::after
  content: ''
.__items .list-item
  background: $whiteColor
  border-bottom: 1px solid $baseBrd
  cursor: pointer
  display: block
  padding: 10px $listItemHorizontalPadding
  position: relative
.__items .list-item.__hovered
  background: #ecf7fc
.__items .list-group + .list.__sub
  display: none
  margin: -1px 0 0
.__items .list-group.__opened + .list.__sub
  display: block
.__items .list-item.__error
  background: #fef8f7
  border-color: #fce7e6
.__items .list-item.__default
  background: #ecf7fc
  &::after
    border-color: #a1c0d4 #a1c0d4 transparent transparent
    border-style: solid
    border-width: 15px
    content: ""
    font-family: $fontAw
    font-size: 16px
    position: absolute
    right: 0
    top: 0

    transform: none
  &::before
    color: $whiteColor
    content: ""
    font-family: $fontAw
    font-size: 10px
    line-height: 0
    position: absolute
    right: 4px
    top: 9px
    z-index: 25
.__items .list-item:after
  display: none
.__items .list-item.__more:before
  background: url('/images/navbar/more.svg') no-repeat
  color: $colorText
  float: left
  font-family: $fontAw
  font-size: 16px
  height: 20px
  margin: 0 10px 0 0
  width: 20px
.__items.__reverse .list-item:after
  right: 60px
  content: "\f053"
.__items .list-item.__not-icon
  &::after,
  &::before
    content: ''
.__items label.list-item:after
  display: none
.__items .list-item:hover:after
  right: 25px
.__items.__reverse .list-item:hover:after
  right: 55px
.__items .list-item.__default:hover:after
  right: 0
.__items .list-link
    display: block
    white-space: nowrap
    overflow: hidden
.__items .list-ico,
.__files .list-ico
  font-size: 28px
  height: 30px
  line-height: 30px
  margin: 0 5px 0 0
  vertical-align: middle
  width: 40px
.__files .list-ico
  font-size: 24px
  width: 30px
.__files .list.__sub .list-ico
  font-size: 24px
.__items .list-ico ~ .list-name,
.__files .list-ico ~ .list-name
  vertical-align: middle
.__items .list-name,
.__files .list-name
  color: $colorText
  display: inline-block
  font-size: 14px
  font-weight: 500
  position: relative
  vertical-align: middle
  z-index: 25
.__items .list-img
  background-blend-mode: darken
  background-position: 50% 50%
  background-repeat: no-repeat
  background-size: contain
  display: inline-block
  height: 30px
  margin: 0 15px 0 0
  position: relative
  vertical-align: middle
  width: 30px
.__files .list-name
  vertical-align: middle
.__files .list-descr
  color: $colorText
  display: block
  font-size: 12px
.__files .list-ico ~ .list-descr,
.__files .list-img ~ .list-descr
  margin: 0 0 0 37px
.__items .list-t
  display: block
  font-size: 14px
  font-weight: 500
  overflow: hidden
  text-overflow: ellipsis
.__items .list-descr
  color: #999
  display: block
  font-size: 12px
.__items .list-action
  display: inline-block
  margin: -10px 10px -10px -10px
  text-align: center
  width: 28px
  &::after
    content: ' '
    display: inline-block
    height: 100%
    vertical-align: middle
  .list-ico
    color: $baseColor
    font-size: 21px
    margin: 0
    width: auto
.__items .list-item:hover .list-action .list-ico
  color: $baseColor
.__items .list-ico ~ .list-t
  display: inline-block
.__items .list-ico ~ .list-descr
  margin: 0 0 0 50px
.__items .list-t,
.__items .list-descr
  position: relative
  z-index: 50
.__items .list-item input[type=checkbox],
.__items .list-item input[type=radio]
  left: 0
  position: absolute
  top: 0
  visibility: hidden
.__items .list-item .switch
  bottom: 0
  left: 0
  position: absolute
  right: 0
  top: 0
.__items label.list-item :checked ~ .switch,
.__items label.list-item.__selected .switch
  background: #ecf7fc
  box-shadow: 0 0 0 1px #a1c0d4
  &::after
    border-color: #a1c0d4 #a1c0d4 transparent transparent
    border-style: solid
    border-width: 15px
    content: ''
    font-family: $fontAw
    font-size: 16px
    position: absolute
    right: 0
    top: 0
  &::before
    color: $whiteColor
    content: ""
    font-family: $fontAw
    font-size: 10px
    line-height: 0
    position: absolute
    right: 4px
    top: 9px
    z-index: 25
.__items .list-item.__selected .switch:after
  border-color: #dee9f0 #dee9f0 transparent transparent
.__items label.list-item.__selected .list-name
  color: #a6a6a6
.list.__chosen
  margin: 10px 0
.__chosen .list-item
  margin: 0 10px 10px 0
  position: relative
.__chosen .list-name
  background: $baseColor
  color: $whiteColor
  float: right
  font-size: 11px
  max-width: 345px
  min-height: 15px
  min-width: 30px
  overflow: hidden
  padding: 2px 5px
  text-overflow: ellipsis
  vertical-align: top
  white-space: nowrap
.__chosen .list-remove
  color: #a1c0d4
  cursor: pointer
  float: left
  font-family: caption
  font-size: 17px
  font-weight: bold
  line-height: 1
  margin: 3px 4px 0 0
  &:hover
    color: $baseColor
.__files .list-item
  border: none
  position: relative
.__files .list-block
  cursor: pointer
  display: block
  padding: 2px 20px
.__files .list-link
  display: inline-block
  font-size: 14px
  margin: 10px 0 0
  padding: 2px 20px
.__files .list-img
  display: inline-block
  height: 30px
  margin: 0 5px 0 0
  overflow: hidden
  position: relative
  top: 5px
  vertical-align: middle
  width: 30px
  *
    display: block
    max-width: 100%
.__files .list.__sub .list-item
  margin: 0 0 0 40px

/* Pagination */
.pagination
  background: $lightBg
  border-color: $baseBrd
  border-style: solid
  border-width: 1px 0
  margin: 0 -20px
  padding: 10px 20px
  text-align: center
  .menu-item
    text-align: center
  .menu-item + .menu-item
    margin: 0 0 0 5px
  .menu-link
    background: $whiteColor
    border: 1px solid $baseBrd
    box-sizing: border-box
    color: $colorText
    cursor: pointer
    display: block
    font-size: 12px
    font-weight: 400
    height: 30px
    line-height: 26px
    width: 30px
    &:hover
      background: #e8f5fb
  .menu-item.__selected
    .menu-link
      background: $baseColor
      color: $whiteColor
  .menu-ico
    font-size: 14px


/* Breadcrumbs */
.breadcrumbs
  padding: 15px 0
  .back
    background: $whiteColor
    border: 1px solid #a1c0d4
    border-radius: 50%
    color: #a1c0d4
    display: inline-block
    height: 30px
    line-height: 28px
    text-align: center
    vertical-align: top
    width: 30px
    &:hover
      border-color: $baseColor
      color: $baseColor
  .back ~ .menu
    display: inline-block
    margin: 4px 0 0 10px
    vertical-align: top
  .menu-item.__divider
    height: 22px
    position: relative
    width: 20px
    &::after
      background: #a6a6a6
      content: ''
      height: 4px
      left: 50%
      margin: 0 0 0 -2px
      position: absolute
      top: 50%
      width: 4px
  .menu-link
    max-width: 123px
    display: block
    text-overflow: ellipsis
    overflow: hidden
    color: #43b0e6
    font-size: 14px
    &:hover
      color: #52a2ca

/* Tree */
.tree
  font-size: 0
  text-align: center
.tree-view
  overflow-x: auto
  ul
    list-style: none
    margin: 0
    padding: 0
    white-space: nowrap
.tree-scroll
  padding: 20px 0
  text-align: center
.tree,
.tree-item
  display: inline-block
  padding: 0
  position: relative
  vertical-align: top
.tree.__horizontal
  .tree-item
    display: block
    &:first-child
      &::before
        background: $whiteColor
        content: ""
        height: 50%
        left: -1px
        position: absolute
        top: -1px
        width: 2px
        z-index: 5
    &:last-child
      &::after
        background: $whiteColor
        content: ""
        height: 50%
        left: -1px
        position: absolute
        top: 51%
        width: 2px
        z-index: 5
    .tree-block
      vertical-align: middle
      &::before
        background: #a1c0d4
        content: ""
        height: 2px
        left: -14px
        position: absolute
        top: 50%
        width: 12px

        transform: translateY(-50%)
.tree-item
  &:first-child
    &::before
      background: $whiteColor
      content: ''
      height: 2px
      left: -1px
      position: absolute
      top: 0
      width: 50%
      z-index: 5
.tree-item
  &:last-child
    &::before
      background: $whiteColor
      content: ''
      height: 2px
      right: -1px
      position: absolute
      top: 0
      width: 50%
      z-index: 5
.tree-block
  border: 2px solid #a1c0d4
  box-sizing: border-box
  cursor: pointer
  display: inline-block
  margin: 10px 11px
  padding: 5px 0
  position: relative
  vertical-align: top
  width: 160px
  &:hover
    background: #ecf7fc
  &::before
    background: #a1c0d4
    content: ''
    height: 10px
    left: 50%
    position: absolute
    top: -12px
    width: 2px

    transform: translateX(-50%)
.tree-block.__canceled
  &:hover
    background: #faf1f1
.tree-block.__selected
  background: #d9effa
  border-color: #a1c0d4
.tree-block
  .inner
    height: 100%
    margin: 0 10px
    text-align: left
.tree-item.last .tree-block .inner
  &::after
    background: $whiteColor
    content: ''
    height: 2px
    left: -1px
    position: absolute
    top: -12px
    width: 50%
    z-index: 5
  &::before
    background: $whiteColor
    content: ''
    height: 2px
    position: absolute
    right: -1px
    top: -12px
    width: 50%
    z-index: 10
.first
  > :first-child
    &::before
      display: none
.tree-node
  position: relative
  &::after
    background: #a1c0d4
    content: ''
    height: 2px
    left: 0
    position: absolute
    right: 7px
    top: 0
  &::before
    background: #a1c0d4
    content: ''
    height: 12px
    left: 50%
    position: absolute
    top: -10px
    width: 2px

    transform: translateX(-50%)
.tree-node.__one-el
  margin: -10px 0 0
  &::after,
  &::before
    display: none
.tree.__horizontal
  .tree-node.__one-el
    margin: 0 0 0 -10px
  .tree-node
    display: inline-block
    vertical-align: middle
    .tree-item
      text-align: left
    &::after
      background: #a1c0d4
      bottom: 0
      content: ""
      height: auto
      left: -1px
      position: absolute
      top: 1px
      width: 2px
    &::before
      background: #a1c0d4
      content: ""
      height: 2px
      left: -12px
      position: absolute
      top: 50%
      width: 12px

      transform: translateY(-50%)
.tree-node.__empty
  &::after
    display: none
.tree-el
  color: $colorText
  display: block
  font-size: 12px
  line-height: 1
  margin: 0
  padding: 5px 0 5px 20px
  position: relative
  white-space: normal
  .tree-ico
    color: $colorText
    font-size: 14px
    left: 0
    position: absolute
    width: 20px
.tree-el.__canceled
  background: $baseColor
  color: $whiteColor
  margin: 5px -10px -5px
  padding: 5px 0
  text-align: center
.tree-el.__title
  color: $baseColor
  height: 24px

/* Columns */
.columns
  padding: 15px 0
  &:last-of-type
    clear: both
    padding-top: 0
.form.columns
  padding: 0
@include column(".column", 3, $multipleOnly: true)
  float: left
.column .list.__info
  margin: 0
.column .form-group
  margin-right: 10px
.column + .column .form-group
  margin-left: 10px
  margin-right: 0
.column .column .form-group
  margin-left: 0
  margin-right: 0
.column .column + .column .form-group
  margin-left: 10px
  margin-right: 0
.column + .column .table-wrapper
  margin-left: 10px

/* Calendar */
.form-input.__calendar .dropdown-menu
  background: $whiteColor
  border: 1px solid $baseBrd
  margin: -1px 0 0
  max-width: 400px
  position: absolute
  right: 0
  z-index: 100
  .btn
    background: $lightBg
    color: $colorText
    font-size: 14px
    font-weight: 400
    position: static
    text-shadow: none
    &:disabled
      &:hover
        background: $lightBg
    &:hover
      background: #ecf7fc
  table
    .btn
      width: 100%
      justify-content: center
    input
      text-align: center
      padding: 2px
  .btn-group .btn,
  .btn-group ~ .btn,
  .btn-success
    background: $baseColor
    color: $whiteColor
    display: inline-block
    padding: 0 10px
  .btn-info,
  .btn.active
    background: $baseColor
    color: $whiteColor
.text-muted
  color: #999
.dropdown-menu
  li
    padding: 0
    text-indent: 0
    &:last-child
      background: #e8f5fb
      overflow: hidden
      padding: 5px !important
    &::before
      content: ''
  table
    border-collapse: collapse
    border-spacing: 0
    padding: 0
    width: 100%
    th,
    td
      background: $baseBrd
      border-color: $whiteColor
      border-style: solid
      border-width: 2px
      font-size: 14px
      padding: 1px
      text-align: center
      width: 12.5%
    th
      background: $baseBrd
      font-weight: 500
      small
        display: block
        font-size: 13px
        line-height: 1.4
        margin: 5px 0
        vertical-align: top
  .glyphicon
    font-family: $fontAw
    font-style: normal
  .glyphicon.glyphicon-chevron-left:before
    content: ''
  .glyphicon.glyphicon-chevron-right:before
    content: ''
  .glyphicon.glyphicon-chevron-up:before
    content: ''
  .glyphicon.glyphicon-chevron-down:before
    content: ''

/* Select */
.select2-container
  cursor: pointer
  display: block
  input
    height: auto
.select2-container .select2-choice,
.select2-container-multi .select2-choices
  background: $whiteColor
  border-color: $baseBrd
  color: $colorText
  font-size: 14px
  line-height: 32px
  min-height: 32px
  padding: 0 10px
.select2-container-multi
  .select2-choices
    line-height: 32px
    padding: 0 4px
.select2-container .select2-choice,
.select2-drop
  border-radius: 0
.select2-container-active .select2-choice,
.select2-container-active .select2-choices,
.select2-drop-active,
.select2-container-multi.select2-container-active .select2-choices
  border-color: #a1c0d4
  box-shadow: none
.form-input.__langs .select2-choice,
.form-input.__langs .select2-choices
  padding-left: 36px
.select2-choice > .select2-chosen
  margin: 0
.select2-container .select2-choice .select2-arrow
  background: none
  border: none
  width: 30px
  &::after
    border-color: $baseColor transparent transparent
    border-style: solid
    border-width: 5px 4px
    content: ''
    margin: -3px 0 0
    position: absolute
    right: 10px
    top: 50%
.select2-dropdown-open .select2-choice .select2-arrow
  &::after
    border-color: transparent transparent $baseColor
    margin: -10px 0 0
.select2-search
  input
    background: $whiteColor
.select2-results .select2-highlighted
  background: $baseColor
.select2-container
  li
    color: $colorText
    padding: 0
    text-indent: 0
    &::before
      content: ''

/* Multi selects */
.form-input.__langs .select2-search-field
  left: 36px
.select2-container-multi .select2-choices .select2-search-choice
  background: $lightBg;
  border: 1px solid #a1c0d4
  border-radius: 0
  box-shadow: none
  font-size: 13px
  line-height: 1
  padding: 6px 30px 6px 5px
  z-index: 49
.select2-container-multi .select2-choices .select2-search-field
  input
    padding: 7px 10px 7px 5px
.select2-search-choice-close
  left: auto !important
  top: 6px
.select2-container .select2-choice
  abbr
    height: 100%
    padding: 0 10px
    right: 16px
    top: 0
    background: none !important
.select2-search-choice-close
  &::after
    color: $baseColor
    content: ''
    font-family: $fontAw
    font-size: 12px
    text-shadow: none
    top: 0
    &:hover
      &::after
        color: $baseColor
.select2-container-multi .select2-search-choice-close::after,
.select2-container-multi .select2-search-choice-close:hover::after
  color: #a1c0d4

.select2-container .select2-search
  margin-top: 4px

.select2-container .select2-search input,
.select2-container .select2-choice .select2-arrow b
  background-image: none !important

/* Tags input */
tags-input
  .host
    margin: 0
  .tags
    border-color: $baseBrd
    box-shadow: none
    color: $colorText
    padding: 0 10px
    -moz-appearance: none;
    -webkit-appearance: none;
    li
      padding: 0
      text-indent: 0
      &::before
        content: ''
    .input
      height: 28px
      padding: 0
    .tag-item
      background: $baseColor
      border: none
      border-radius: 0
      color: $whiteColor
      font-family: $font
      font-size: 13px
      height: 24px
      margin: 4px 4px 0 0
      padding: 0 30px 0 6px
      position: relative
    .tag-item.selected
      background: #e51400
    .tag-item
      .remove-button
        font-family: caption
        font-size: 16px
        font-weight: bold
        line-height: 1
        position: absolute
        right: 6px
        top: 5px
  .tags.focused
    border-color: #a1c0d4
    box-shadow: none

/* Main */
.nav-bar,
.cnt
  bottom: 0
  position: fixed
  top: 0
.has-demo-warning .nav-bar,
.has-demo-warning .nav-bar .dropdown,
.has-demo-warning .header
  top: $demoWarningHeight !important
.has-demo-warning .cnt
  padding-top: $demoWarningHeight + $headerHeight

@import "_menu.sass"
@import "_header.sass"

/* Content - main content area */
.cnt
  left: $mainMenuWidth
  overflow: hidden
  overflow-x: auto
  padding-top: $headerHeight
  right: 0
  white-space: nowrap
  z-index: 50
  .cnt-inner
    display: inline-block
    height: 100%
    word-spacing: -4px
    width: 100%
    .blade:not(:first-child):last-child
      margin-right: 90px
  .dashboard,
  .blade
    display: inline-block
    height: 100%
    vertical-align: top
    white-space: nowrap
    word-spacing: 0
.cnt.__hidden
  overflow-x: hidden

/* Blades */
.blade
  background: $whiteColor
  box-shadow: 1px 0 0 0 $baseBrd
  font-family: serif
  margin-right: 1px
  overflow: hidden
  position: relative
  &.__animated
    z-index: -1
    animation: blade ease-in-out .25s
    @for $x from 2 through 5
      &:nth-child(#{$x})
        z-index: -$x
    &.__closing
      animation-direction: reverse
      animation-duration: .125s
  .blade-head,
  .blade-container
    box-shadow: none
    font-family: $font
  .blade-head
    background: $bladeHeadBg
    box-sizing: border-box
    height: 122px
    padding: 25px 0 5px
    position: relative

    transition: height .3s ease
    .blade-status
      height: 25px
      left: 0
      position: absolute
      right: 0
      top: 0
      .status-message
        background: #7a1c13
        bottom: 0
        color: $whiteColor
        font-size: 14px
        left: 0
        line-height: 23px
        padding: 0 0 0 50px
        position: absolute
        right: 0
        top: 0
        z-index: 300
        filter: alpha(opacity=50)
        display: flex
        box-sizing: border-box
        &::after
          color: $whiteColor
          content: ''
          font-family: $fontAw
          left: 20px
          position: absolute
          top: 2px
      .error-message
        flex-grow: 1
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        padding-right: 15px
      .link-error-details
        color: #999
        float: right
        margin-right: 80px
        margin-top: -1px
        text-decoration: underline
        &::hover
          color: $whiteColor
      .progress-bar
        bottom: 0
        height: auto
        left: 0
        margin: 0
        position: absolute
        right: 0
        top: 0
        z-index: 200
    .blade-nav
      height: 25px
      left: 0
      position: absolute
      right: 0
      text-align: right
      top: 0
      .menu
        background: rgba(0,0,0,.25)
        position: relative
      .menu-item
        background: none
        border: none
        cursor: pointer
        font-size: 0
        height: 25px
        line-height: 1.4
        position: relative
        width: 35px
        z-index: 250
        *
          background: none
          border: none
          cursor: pointer
          font-size: 0
          height: 100%
          width: 100%
        .btn-ico
          color: $whiteColor
          font-size: 13px
          line-height: 0
          margin: 12px 0 0
      .menu-item.__minimize,
      .menu-item.__maximize,
      .menu-item.__close
        z-index: 350
      .menu-item.__disabled
        cursor: not-allowed
      .menu-item.__minimize,
      .menu-item.__maximize
        &::after
          border-color: $whiteColor
          border-style: solid
          box-sizing: border-box
          height: 8px
          top: 8px
          width: 12px
      .menu-item.__minimize
        &::after
          border-width: 0 0 2px
      .menu-item.__maximize
        &::after
          border-width: 2px 1px 1px
      .menu-item.__close
        &::after
          content: '×'
          font-family: caption
          font-size: 20px
          font-weight: bold
          top: -3px
      .menu-item
        &::after
          color: $whiteColor
          content: ''
          left: 50%
          margin: 0 0 0 -6px
          position: absolute
        &:hover
          background: $baseColor
      .menu-item.__close
        &:hover
          background: $genericErrorColor
      .menu-item.__disabled
        &:hover
          background: none
      .menu-item
        > *:disabled
          cursor: not-allowed
    .blade-t
      color: $whiteColor
      left: 0
      margin: 8px 20px
      min-height: 34px
      padding: 0 0 0 60px
      position: absolute
      right: 0
      .blade-t_head
        font-size: 18px
        margin: 6px 0 0
    .blade-t_ico
      font-size: 34px
      line-height: 34px
      height: 34px
      left: 0
      position: absolute
      top: 0
      width: 40px
    .blade-t_head,
    .blade-t_subhead
      font-weight: 300
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
    .blade-t_subhead
      color: #bbb
      font-size: 11px
    .blade-t.__secondary
      .blade-t_head
        font-size: 14px
        margin: 0
    .blade-toolbar
      background: $bladeHeadBg
      border-top: 1px solid rgba(255,255,255,.2)
      box-shadow: none
      left: 0
      overflow: hidden
      position: absolute
      right: 0
      top: 74px
      z-index: 50

      transition: height .3s ease
      .menu
        margin: 0 0 0 10px
        white-space: normal
      .menu-item
        margin: 7px 0
      .menu-item.__loading
        pointer-events: none
        position: relative
        &::after
          background-color: #333
          background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0))
          background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0))
          background-size: 30px 30px
          bottom: 0
          content: ''
          left: 0
          opacity: .8
          position: absolute
          right: 0
          top: 0

          animation: linear 2s infinite progress
          filter: alpha(opacity=80)
      .menu-btn
        background: none
        border: none
        color: $whiteColor
        cursor: pointer
        font-size: 11px
        font-weight: 300
        display: block
        padding: 0 10px
        position: relative
        text-align: center
        &:hover
          color: $baseColor
        &:disabled
          color: $whiteColor
          cursor: not-allowed
      .menu-ico
        display: block
        font-size: 18px
        margin: 0 0 3px
    .blade-switch
      bottom: 4px
      position: absolute
      right: 28px
      text-align: center
      z-index: 100
      .switch-t
        color: $whiteColor
        display: block
        font-size: 11px
        font-weight: 300
        margin: 0 0 3px
        text-transform: uppercase
      .form-control
        .form-label
          margin: 0
.blade.__animate
  z-index: -1
.blade.__active
  margin: 0 0 0 40px
  .blade-head
    background: #34454c
.menu.__more .menu-item
  margin: 5px 0
.menu.__more .blade-switch
  padding: 0 10px
  position: static
.blade .blade-head,
.blade .blade-container
  padding-right: $bladeContainerPadding
.blade .blade-wrapper,
.blade .blade-container,
.blade .blade-content,
.blade .blade-inner
  height: 100%
.blade
  .blade-container
    height: calc(100% - 130px)
    overflow: hidden
    position: relative
    transition: height .3s ease
    .blade-static
      background: $lightBg
      border-color: $baseBrd
      border-style: solid
      border-width: 0 0 2px
      box-sizing: border-box
      height: 70px
    .blade-static.__quote
      height: 230px
    .blade-static.__collapsed
      .breadcrumbs
        padding: 13px 20px
    .blade-static.__expanded
      .breadcrumbs
        margin: 0 0 -15px
        padding: 14px 20px
    .blade-static .form-group,
    .blade-static .form
      margin: 0 20px
      padding: 17px 0
      position: relative
    .blade-static .form-group:only-child
      box-sizing: border-box
      height: 100%
    .blade-static .column
      .form-group
        margin: 5px 10px 0 0
        padding: 0
    .blade-static
      .form-group
        .link
          display: inline-block
          font-size: 14px
          margin: 12px 10px 0 0
    .blade-static
      .form-input.__search
        margin-right: 80px
        &:last-child
          margin-right: 0
    .blade-static
      .form-count
        @include center(false, true, true)
        right: 0;
    .blade-static .pagination
      border: none
      margin: 0
      padding: 0
      text-align: left
    .blade-static .btn + .btn
      margin: 0 0 0 15px
    .blade-static.__expanded
      height: 114px
    .blade-static.__collapsed
      height: 60px
    .blade-static.__bottom
      border-width: 2px 0 0
      bottom: 0
      left: 0
      padding: 18px 20px
      position: absolute
      right: 8px
      z-index: 100
    .blade-static.__bottom .form-label
      margin: 0 0 5px
    .blade-static + .blade-content
      height: calc(100% - 72px)
    .blade-static.__quote + .blade-content
      height: calc(100% - 230px)
    .blade-static.__collapsed + .blade-content
      height: calc(100% - 62px)
    .blade-static.__expanded + .blade-content
      height: calc(100% - 116px)
    .blade-static + .blade-static.__bottom + .blade-content
      height: calc(100% - 140px)
    .blade-static.__collapsed + .blade-static.__bottom + .blade-content,
    .blade-static + .blade-static.__bottom.__collapsed + .blade-content
      height: calc(100% - 130px)
    .blade-static.__collapsed + .blade-static.__bottom.__collapsed + .blade-content
      height: calc(100% - 120px)
    .blade-static.__expanded + .blade-static.__bottom + .blade-content,
    .blade-static + .blade-static.__bottom.__expanded + .blade-content
      height: calc(100% - 184px)
    .blade-static.__expanded + .blade-static.__bottom.__expanded + .blade-content
      height: calc(100% - 228px)
    .blade-static.__expanded + .blade-static.__bottom.__collapsed + .blade-content
      height: calc(100% - 174px)
    .blade-container .canceled + .blade-content
      height: calc(100% - 45px)
  .blade-container.__loading
    opacity: .25
    pointer-events: none

    filter: alpha(opacity=25)
.blade .blade-content
  white-space: normal
.blade.__active
  .blade-content
    background: #f1fbfe
.blade
  .blade-content.__gray
    background: $lightBg
.__canceled
  background-color: #eff7fc

.blade-content
  .blade &
    @include blaseSizes()
      $width: getBladeContentSize($bladeSizeName)
      min-width: $width
      width: $width
  .blade.__maximized &,
  .blade.__expanded &
    width: 100%
  .blade &.__tree
    width: 340px
.blade-content .table
  min-width: getBladeContentSize('Normal')
.blade-content.__medium-wide .table
  min-width: getBladeContentSize('Medium')
.blade
    .blade-inner
      box-sizing: border-box
      overflow: hidden
      padding: 0 $bladePadding
      position: relative
.blade .blade-inner::-webkit-scrollbar,
.log::-webkit-scrollbar,
.ui-grid-viewport::-webkit-scrollbar
  background-color: transparent
.blade .blade-inner::-webkit-scrollbar-track-piece,
.log::-webkit-scrollbar-track-piece
  background: #f9f9f9
.blade .blade-inner::-webkit-scrollbar-thumb,
.log::-webkit-scrollbar-thumb
  background: #e6e6e6
.blade .__gray .blade-inner::-webkit-scrollbar-track-piece,
.ui-grid-viewport::-webkit-scrollbar-track-piece
  background: #e9e9e9
.blade .blade-inner,
.log
  -ms-scrollbar-arrow-color: #f9f9f9
  -ms-scrollbar-face-color: #e6e6e6
  -ms-scrollbar-shadow-color: #e6e6e6
  -ms-scrollbar-track-color: #f9f9f9
.blade .__gray .blade-inner,
.ui-grid-viewport
  -ms-scrollbar-arrow-color: #e9e9e9
  -ms-scrollbar-face-color: #d6d6d6
  -ms-scrollbar-shadow-color: #d6d6d6
  -ms-scrollbar-track-color: #e9e9e9
.blade.__maximized .blade-inner,
.blade.__expanded .blade-inner,
.blade .blade-inner:hover
  overflow-y: auto
.blade .blade-inner.ui-grid-no-scroll
  overflow: visible
.blade-content
  @include blaseSizes()
    .inner-block
      $width: getBladeInnerSize($bladeSizeName)
      min-width: $width
      width: $width
.inner-block
  .blade.__maximized .blade-content &,
  .blade.__expanded .blade-content &
    width: 100%
  .blade-content.__tree &
    width: 300px

.blade .blade-loader
  padding: 20px
  text-align: center
  &::after
    color: $baseColor
    content: attr(data-title)
    font-size: 60px
    left: 0
    overflow: hidden
    position: absolute
    text-transform: uppercase
    top: 0
    white-space: nowrap

    animation: loading 2s infinite ease-in-out
.blade .example-mail
  padding: 20px 0

/* Image preview */
.image-preview
  background: $whiteColor
  border: 2px solid #a1c0d4
  height: 300px
  line-height: 298px
  overflow: hidden
  position: fixed
  width: 300px
  z-index: 50
  *
    display: inline-block
    max-width: 100%
    vertical-align: middle
.image-preview-small
  background: $whiteColor
  border: 2px solid #a1c0d4
  height: 108px
  width: 108px
  line-height: 100px
  overflow: hidden
  z-index: 50
  *
   display: inline-block
   max-width: 100%
   vertical-align: middle
.image-preview-no-image
  text-align: center
  font-size: 48px
  color: #dee9f0

/* Gridster */
.gridster
  list-style: none
  > ul
    height: 100%
  > .list.__editing
    background: url(/images/grid.png) repeat scroll 0 0
  gridster-item,
  .list-item
    background: $lightBg
    box-sizing: border-box
    box-shadow: 0 0 0 2px #dee9f0 inset
    padding: 2px
    position: absolute
    text-align: center
    &:hover
      box-shadow: 0 0 0 2px #a1c0d4 inset
  .list-item.error
    background: #f2dede
    box-shadow: 0 0 0 2px #ebccd1 inset
    color: #e0a9a9
  .list-item.success
    background: #dff0d8
    box-shadow: 0 0 0 2px #d6e9c6 inset
    color: #b2e0a9
  .list-item.warning
    background: #fcf8e3
    box-shadow: 0 0 0 2px #faebcc inset
    color: #e0d8a9
  .list-item.info
    background: #d9edf7
    box-shadow: 0 0 0 2px #bce8f1 inset
    color: #a9d1e0
  .gridster-item-moving
    opacity: .7

    filter: alpha(opacity=70)
  .list:not(.__editing)
    .list-item
      .customize
        background: #a1c0d4
        color: $whiteColor
        font-size: 12px
        font-weight: 500
        left: 0
        padding: 3px 10px
        position: absolute
        text-align: center
        top: -22px
        z-index: 50
.customize
  .custom-ico
    color: #fff
    font-size: 12px
.gridster-preview-holder
  background: $baseBrd
  border-color: #a1c0d4
  border-style: dashed
  border-width: 1px
.gridster .gridster-cnt,
.gridster [ng-model="widget"]
  overflow: hidden
  text-align: center
.gridster .gridster-cnt
  cursor: pointer
  bottom: 10px
  left: 10px
  position: absolute
  right: 10px
  top: 10px
.gridster [ng-model="widget"]
  cursor: move
  height: 100%
  width: 100%
.gridster .gridster-cnt.__info,
.gridster .gridster-cnt.__note
  cursor: inherit;
  bottom: 2px
  left: 2px
  right: 2px
  top: 2px
.gridster .gridster-cnt.__note
  cursor: pointer
.gridster .gridster-cnt
  &::after
    content: ''
    display: inline-block
    height: 100%
    vertical-align: middle
.gridster-cnt .cnt-inner
  display: inline-block
  height: auto
  line-height: 1.4
  margin: -24px 0 0
  padding: 0
  vertical-align: middle
  word-spacing: 0
.gridster .image
  border: 1px solid $baseBrd
  box-sizing: border-box
  height: 50px
  left: 69px
  position: absolute
  top: 69px
  width: 50px
  &::after
    content: ''
    display: inline-block
    height: 100%
    vertical-align: middle
  img
    display: block
    max-height: 100%
    max-width: 100%
.gridster .list-t,
.gridster .gallery-descr
  color: $colorText
  font-size: 12px
  font-weight: 500
  word-spacing: 0
.gridster .list-price
  color: $baseColor
  font-size: 12px
.gridster .list-count
  color: $baseColor
  font-size: 22px
  font-weight: 300
.gridster .list-count + .list-t
  font-size: 12px
.gridster .list-ico,
.gridster .gallery-ico,
.gridster .comment-ico
  color: #dee9f0
  font-size: 24px
.gridster .gallery-ico,
.gridster .comment-ico
  font-size: 48px
.gridster .list-item:hover .list-ico,
.gridster .list-item:hover .gallery-ico,
.gridster .list-item:hover .comment-ico
  color: #a1c0d4
.gridster .list-img
  border: 1px solid $baseBrd
  display: inline-block
  height: 50px
  vertical-align: middle
  width: 50px
  *
    display: block
    max-width: 100%

/* Tooltip */
.tooltip
  font-family: $font
  font-size: 12px
  position: absolute
  z-index: 100
  .tooltip-arrow
    border-color: transparent
    border-style: solid
    position: absolute
    width: 0
    height: 0
  &.left,
  &.right
    padding: 0 8px
    .tooltip-arrow
      top: 50%
      margin-top: -8px
  &.left
    margin-left: -3px
    .tooltip-arrow
      border-left-color: $baseColor
      border-width: 8px 0 8px 8px
      right: 0
  &.right
    margin-left: 3px
    .tooltip-arrow
      border-right-color: $baseColor
      border-width: 8px 8px 8px 0
      left: 0
  &.top,
  &.bottom
    padding: 8px 0
    .tooltip-arrow
      left: 50%
      margin-left: -8px
  &.top
    margin-top: -3px
    .tooltip-arrow
      border-top-color: $baseColor
      border-width: 8px 8px 0 8px
      bottom: 0
  &.bottom
    margin-top: 3px
    .tooltip-arrow
      border-bottom-color: $baseColor
      border-width: 0 8px 8px 8px
      top: 0
  .tooltip-inner
    background: $baseColor
    color: $whiteColor
    padding: 10px
    max-width: 600px

/* Informer */
.__informer
  background: #ecf7fc
  box-shadow: 0 0 0 2px #dee9f0 inset
  color: #a1c0d4
  font-size: 22px
  padding: 10px
  &::after
    content: ''
    display: inline-block
    height: 100%
    vertical-align: middle
  *
    display: inline-block
    line-height: 1.2
    vertical-align: middle
.iframe-cnt
  bottom: 20px
  left: 20px
  position: absolute
  right: 280px
  top: 20px
.lookbook
  background: $whiteColor
  bottom: 20px
  position: absolute
  right: 28px
  top: 20px
  width: 240px

/* Tabs */
.tabs-elements
  margin: 0 -20px
  padding: 18px 0 0
  overflow: hidden
  position: relative
.tabs .tab-item
  background: $baseBrd
  border-top: 1px solid $baseBrd
  box-sizing: border-box
  color: $baseColor
  cursor: pointer
  float: left
  font-size: 14px
  font-weight: 600
  height: 34px
  line-height: 26px
  position: relative
  top: 2px
  text-align: center
.tabs .tab-item + .tab-item
  border-left: 1px solid $whiteColor
.tabs .tab-item.__selected
  background: $whiteColor
  border-bottom: 2px solid $whiteColor
  line-height: 30px
  top: 0
.tabs .tab-item:nth-last-child(2),
.tabs .tab-item:nth-last-child(2) ~ .tab-item
  width: 50%
.tabs .tab-item:nth-last-child(3),
.tabs .tab-item:nth-last-child(3) ~ .tab-item
  width: 33.3333%
.tabs .tab-item:nth-last-child(4),
.tabs .tab-item:nth-last-child(4) ~ .tab-item
  width: 25%
.tabs .tab-item:nth-last-child(5),
.tabs .tab-item:nth-last-child(5) ~ .tab-item
  width: 20%
.tabs .tab-cnt
  clear: both
  display: none
  padding: 10px 0
.tabs .tab-cnt.__opened
  display: block
.tab-cnt h1,
.tab-cnt h2,
.tab-cnt h3
  margin: 20px 0
.tab-cnt p,
.tab-cnt ul,
.tab-cnt ol
  margin: 0 0 10px
.tab-cnt img
  margin: 10px 0

/* Popup */
.overlay
  bottom: 0
  left: 0
  position: fixed
  right: 0
  text-align: center
  top: 0
  z-index: 9000

  transition: .5s ease-in-out
.gallery-tpl
  display: none
.overlay.__loaded
  background: rgba(0,0,0,.7)
.overlay .overlay-cnt
  bottom: 0
  left: 0
  position: absolute
  right: 0
  top: 0
  &::after
    content: ''
    display: inline-block
    height: 100%
    vertical-align: middle
.overlay .popup
  background: $whiteColor
  border: 5px solid #a1c0d4
  bottom: 40px
  font-family: $font
  left: 80px
  position: absolute
  right: 80px
  transform-origin: 50% 100%
  top: 40px

  transform: scale(0)
  transition: .5s ease
.popup .popup-cnt
  bottom: 0
  box-sizing: border-box
  height: 100%
  left: 0
  position: absolute
  right: 0
  text-align: center
.modal-body
  .popup-close
    color: $whiteColor
    cursor: pointer
    font-size: 18px
    line-height: 1
    position: absolute
    right: 10px
    top: 10px
    z-index: 50
  &.size-clearfix 
    max-height: 530px
    overflow: auto
  @media (max-height: 766px) 
    &.size-clearfix 
      max-height: 400px
      overflow: auto
  .item-list-clearfix
    max-height: 530px
.modal-body .gallery
  height: 100%
  overflow: hidden
  position: relative
  text-align: center
.gallery .image-link
  background: #a1c0d4
  color: $whiteColor
  left: 0
  height: 45px
  line-height: 40px
  position: absolute
  right: 0
  text-align: center
  top: 0
  z-index: 25
.gallery .__slides,
.gallery .__slides .list-item
  height: 100%
  width: 100%
.gallery .control
  color: #a1c0d4
  font-size: 30px
  left: -50px
  position: absolute
  text-align: center
  top: 50%
  z-index: 5

  transform: translateY(-50%)
  transition: .35s ease
  &::after
    content: ''
    height: 100%
    display: inline-block
    vertical-align: middle
.gallery .control:hover
  color: $baseColor
.gallery:hover .ctrl-l
  left: 20px
.gallery .ctrl-r
  left: auto
  right: 20px
.gallery:hover .ctrl-r
  right: 20px
.gallery .__slides
  padding: 55px 0 10px
  position: relative
.__slides .list-item
  float: left
  &::after
    content: ''
    height: 100%
    display: inline-block
    vertical-align: middle
.__slides .list-img
  display: inline-block
  max-height: 100%
  max-width: 100%
  vertical-align: middle
.gallery .__navs
  bottom: -100px
  height: 50px
  position: absolute
  left: 50%
  transform: translateX(-50%)
  transition: .35s ease
.gallery:hover .__navs
  bottom: 20px
.__navs .list-item
  background: $whiteColor
  border: 1px solid $baseBrd
  box-sizing: border-box
  cursor: pointer
  display: inline-block
  filter: alpha(opacity=50)
  height: 100%
  margin: 0 4px
  opacity: .5
  transition: .3s ease
  width: 50px
.__navs .list-item:hover,
.__navs .list-item.__selected
  border-color: #a1c0d4
  filter: alpha(opacity=100)
  opacity: 1
.__navs .list-item::after
  content: ''
  display: inline-block
  height: 100%
  vertical-align: middle
.__navs .list-item .list-img
  display: inline-block
  max-height: 100%
  max-width: 100%
  vertical-align: middle

// Buttons
.btn
  align-items: center
  border-radius: 2px
  display: inline-flex
  font-size: 11px
  height: 28px
  padding: 0 30px
  &:hover
    opacity: 1
  &--orange
    background-color: $orangeBg
    &:hover
      background-color: darken($orangeBg, 5%)
  &--blue
    background-color: $blueBg
    &:hover
      background-color: darken($blueBg, 5%)
